<template>
    <div id="index">

        <!-- Wrapper -->
        <div id="wrapper">

            <!-- Header -->
            <header id="header">
                <div class="inner">

                    <!-- Logo -->
                    <a href="index.html" class="logo">
                        <span class="symbol"><img src="static/images/logo.svg" alt="" /></span>
                        <span class="title">前端导航</span>
                    </a>

                    <!-- Nav -->
                    <nav>
                        <ul>
                            <li>
                                <a href="#menu">Menu</a>
                            </li>
                        </ul>
                    </nav>

                </div>
            </header>

            <!-- Menu -->
            <nav id="menu">
                <h2>Menu</h2>
                <ul>
                    <li @click.prevent.stop="openCommit">
                        <a href="javascript:void(0);">Commit</a>
                    </li>
                </ul>
            </nav>

            <router-view></router-view>

            <commit :isShown="isShown"  @closeCommit="closeCommit"></commit>

        </div>

    </div>
</template>

<script>
import Commit from '../components/Commit'
export default {
    name: 'index',
    data: function() {
        return {
            isShown: false
        }
    },
    components: {
        Commit
    },


    methods: {
        openCommit(){
            this.isShown = true;
            $("body").removeClass('is-menu-visible')
        },
        closeCommit(){
            this.isShown = false;
        }
    },
    mounted() {

    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
